<template>
  <div>
    <el-form
      :inline="true"
      label-position="right"
      size="small"
      class="filter-form-inline"
      label-width="120px"
    >
      <item-title title="产品信息" />
      <product-info :datas="datas" />
      <item-title title="终端信息" />
      <terminal-info :datas="datas" />
      <item-title title="渠道客户信息" />
      <agent-info :datas="datas" />
      <item-title title="配送信息" />
      <distributor :datas="datas" />
    </el-form>
  </div>
</template>

<script>
import {inject, reactive, toRefs, watch} from 'vue'
import productInfo from './productInfo.vue'
import terminalInfo from './terminalInfo.vue'
import agentInfo from './agentInfo.vue'
import distributor from './distributor.vue'

export default {
  name: 'Relationship',
  components: {
    productInfo,
    terminalInfo,
    agentInfo,
    distributor,
  },
  props: {
    tradingProductId: {
      type: Number,
      default: 0,
    },
    apiData: {
      type: Object,
      default: () => {
        return {
          apiFile: 'terminal',
          apiPath: 'TRADINGPRODUCT_DETAIL',
          dataOption: 'relationStandard',
        }
      },
    },
  },
  setup(props, context) {
    const api = inject('api')
    var data = reactive({
      datas: {
        productInfoDetail: {},
        agentDetail: {},
        distributeContractDetails: [],
      },
    })

    // 获取详情
    const handlDetail = () => {
      api[props.apiData.apiFile]
        [props.apiData.apiPath](props.tradingProductId)
        .then((res) => {
          if (res.code === 0) {
            if (props.apiData.dataOption) {
              data.datas = res.data[props.apiData.dataOption]
            } else {
              data.datas = res.data
            }
          }
        })
    }
    watch(
      () => props.tradingProductId,
      (newval, oldval) => {
        if (newval) {
          handlDetail()
        }
      },
      { immediate: true }
    )

    return {
      ...toRefs(data),
      handlDetail,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
